<template>
  <div class="order-query">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单查询</span>
        </div>
      </template>
      <div class="content-body">
        <!-- 搜索和筛选区域 -->
        <div class="search-filter">
          <el-input 
            v-model="queryForm.orderId" 
            placeholder="请输入订单ID搜索" 
            style="width: 200px; margin-right: 10px;"
            prefix-icon="Search" 
            clearable
          />
          <el-select v-model="queryForm.status" placeholder="选择订单状态" style="width: 120px; margin-right: 10px;">
            <el-option label="全部" value="" />
            <el-option label="待付款" value="0" />
            <el-option label="已付款" value="1" />
            <el-option label="已发货" value="2" />
            <el-option label="已完成" value="3" />
            <el-option label="已取消" value="4" />
          </el-select>

          <el-button type="primary" @click="getList">搜索</el-button>
        </div>
        
        <!-- 订单列表 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="orderNo" label="订单ID" width="180" />
          <el-table-column prop="productName" label="商品名称" width="120" />
          <el-table-column prop="num" label="商品数量" width="80" />
          <el-table-column prop="price" label="订单总价" width="100" />
          <el-table-column prop="createTime" label="下单时间" width="180" />
          <el-table-column prop="status" label="订单状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleConfirm(scope.row)">确认</el-button>
              <el-button 
                type="danger" 
                size="small" 
                @click="handleCancelOrder(scope.row.id)"
                v-if="scope.row.status === '0' && !isCancelling"
              >
                取消
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination" style="margin-top: 20px; text-align: right;">
          <el-pagination 
            v-model:current-page="queryForm.pageNum"
            v-model:page-size="queryForm.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
import { Search, User } from '@element-plus/icons-vue'
import { orderList, confirmOrder } from '@/request/order.js' 

// 查询表单
const queryForm = ref({
  pageNum: 1,
  pageSize: 10,
  orderId: '',
  username: '',
  status: ''
})

// 日期范围
const dateRange = ref([])

// 加载状态
const isLoading = ref(false)
const isCancelling = ref(false)

// 数据列表
const tableData = ref([])
const total = ref(0)

// 详情弹窗
const detailDialogVisible = ref(false)
const currentOrder = ref(null)

// 获取订单列表
const getList = () => {
  isLoading.value = true
  
  // 构建查询参数
  const params = {
    ...queryForm.value
  }
  
  // 处理日期范围
  if (dateRange.value && dateRange.value.length === 2) {
    params.startTime = dateRange.value[0]
    params.endTime = dateRange.value[1]
  }
  
  orderList(params).then(res => {
    tableData.value = res.records || []
    total.value = res.total || 0
  }).catch(() => {
    ElMessage.error('获取订单列表失败')
  }).finally(() => {
    isLoading.value = false
  })
}

// 初始加载
getList()

// 获取订单状态文本
const getStatusText = (status) => {
  const statusMap = {
    '1': '已付款',
    '2': '已取消',
    '3': '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 获取订单状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    '0': 'warning',
    '1': 'primary',
    '2': 'info',
    '3': 'success',
    '4': 'danger'
  }
  return typeMap[status] || 'default'
}



// 确认订单
const handleConfirm = (order) => {
  ElMessageBox.confirm('确定要确认这个订单吗？', '确认订单', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    isCancelling.value = true
    confirmOrder(order.id).then(() => {
      ElMessage.success('订单已确认')
      getList()
    }).catch(() => {
      ElMessage.error('确认订单失败')
    }).finally(() => {
      isCancelling.value = false
    })
  }).catch(() => {
    // 用户取消操作
  })
}

// 分页相关方法
const handleSizeChange = (size) => {
  queryForm.value.pageSize = size
  getList()
}

const handleCurrentChange = (current) => {
  queryForm.value.pageNum = current
  getList()
}
</script>

<style scoped>
.content-body {
  padding-top: 10px;
}

.search-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.order-detail {
  padding: 10px 0;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  margin: 0 0 15px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #e4e7ed;
  font-size: 16px;
  color: #303133;
}

.detail-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.detail-row .label {
  width: 100px;
  color: #606266;
}

.detail-row .value {
  flex: 1;
  color: #303133;
}

.detail-row .value.price {
  color: #f56c6c;
  font-weight: bold;
}
</style>